<%@ page language="java" isELIgnored="false" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<jsp:directive.include file="/WEB-INF/sitemesh-common/taglibs.jsp" />
<c:if test="${hasErrors}"><meta id="error"></c:if>

<form:form name="userForm" commandName="userForm">
<form:hidden path="id"/>

<table class="form">
<tr>
   <td>Username:</td>
   <td>
      <form:input path="username" maxlength="30" cssStyle="width: 140px; height: 21px" cssClass="text ui-widget-content ui-corner-all" /> (<span style="color: red">*</span>)<br>
      <form:errors path="username" cssStyle="color:red" />
   </td>
   <td width="20px" rowspan="3">&nbsp;</td>
   <td>Password:</td>
   <td>
      <form:password path="password" maxlength="30" cssStyle="width: 140px; height: 21px" cssClass="text ui-widget-content ui-corner-all" /><br>
      <form:errors path="password" cssStyle="color:red" />
   </td>
   <td width="20px" rowspan="3">&nbsp;</td>
   <td width="20px" rowspan="2">&nbsp;</td>
</tr>
<tr>
   <td>First Name:</td>
   <td>
      <form:input path="firstName" maxlength="30" cssStyle="width: 140px; height: 21px" cssClass="text ui-widget-content ui-corner-all" /> (<span style="color: red">*</span>)<br>
      <form:errors path="firstName" cssStyle="color:red" />
   </td>
   <td>Last Name:</td>
   <td>
      <form:input path="lastName" maxlength="30" cssStyle="width: 140px; height: 21px" cssClass="text ui-widget-content ui-corner-all" /> (<span style="color: red">*</span>)<br>
      <form:errors path="lastName" cssStyle="color:red" />
   </td>
</tr>
<tr>
   <td>Middle Name:</td>
   <td><form:input path="middleName" maxlength="30" cssStyle="width: 140px; height: 21px" cssClass="text ui-widget-content ui-corner-all" /></td>
   <td>Enabled:</td>
   <td><div id='enabledCheckbox'></div><form:checkbox path="enabled" value="Y" cssStyle="display: none" /></td>
   <script type="text/javascript">
      $("#enabledCheckbox").jqxCheckBox({
         width: 20,
         height: 20,
         boxSize: 15, theme: getSowTheme('ui-redmond'),
         checked: $("input[name='enabled']").is(':checked')
      });
      $("#enabledCheckbox").bind('change', function (event) {
         $("input[name='enabled']").attr('checked', event.args.checked);
      });
   </script>
   <td><input id="btnUpdateUser" type="button" value="Update" onclick="updateUser()" style="cursor: pointer;" /></td>
   <script type="text/javascript">$("#btnUpdateUser").jqxButton({ theme: getSowTheme('ui-redmond') });</script>
</tr>
</table>

</form:form>